<template>
  <UserLayout :active-index="'2'" :active-menu="'landlord-center'">
    <div class="maintenance-content">
      <div class="maintenance-header">
        <el-button type="primary" @click="goBack" class="back-btn">
          <el-icon><ArrowLeft /></el-icon>
          返回房东中心
        </el-button>
        <h2>维修申请管理</h2>
        <p>处理租客提交的维修申请</p>
      </div>

          <div class="maintenance-content">

      <div class="maintenance-table">
        <el-table :data="maintenanceApplications" style="width: 100%">
          <el-table-column prop="houseTitle" label="房源信息" width="200" />
          <el-table-column prop="tenantName" label="租客姓名" width="120" />
          <el-table-column prop="faultType" label="故障类型" width="120">
            <template #default="scope">
              <el-tag :type="getFaultTypeColor(scope.row.faultType)">
                {{ getFaultTypeText(scope.row.faultType) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="urgency" label="紧急程度" width="100">
            <template #default="scope">
              <el-tag :type="getUrgencyType(scope.row.urgency)">
                {{ getUrgencyText(scope.row.urgency) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="faultDetails" label="故障详情" width="250" show-overflow-tooltip />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="250">
            <template #default="scope">
              <el-button size="small" @click="viewDetails(scope.row)">查看详情</el-button>
              <el-button v-if="scope.row.status === 'pending'" type="success" size="small" @click="approveApplication(scope.row)">通过</el-button>
              <el-button v-if="scope.row.status === 'pending'" type="danger" size="small" @click="rejectApplication(scope.row)">拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 维修申请详情弹窗 -->
    <el-dialog v-model="dialogVisible" title="维修申请详情" width="600px">
      <div v-if="selectedApplication">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="房源信息">{{ selectedApplication.houseTitle }}</el-descriptions-item>
          <el-descriptions-item label="租客姓名">{{ selectedApplication.tenantName }}</el-descriptions-item>
          <el-descriptions-item label="故障类型">
            <el-tag :type="getFaultTypeColor(selectedApplication.faultType)">
              {{ getFaultTypeText(selectedApplication.faultType) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="紧急程度">
            <el-tag :type="getUrgencyType(selectedApplication.urgency)">
              {{ getUrgencyText(selectedApplication.urgency) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="故障详情">{{ selectedApplication.faultDetails }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ selectedApplication.contactPhone }}</el-descriptions-item>
          <el-descriptions-item label="期望处理时间">{{ selectedApplication.expectedTime }}</el-descriptions-item>
          <el-descriptions-item label="备注说明">{{ selectedApplication.remarks || '无' }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusType(selectedApplication.status)">{{ getStatusText(selectedApplication.status) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item v-if="selectedApplication.estimatedTime" label="预估处理时间">
            {{ selectedApplication.estimatedTime }}
          </el-descriptions-item>
          <el-descriptions-item v-if="selectedApplication.rejectReason" label="拒绝理由">
            {{ selectedApplication.rejectReason }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    </div>
  </UserLayout>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import UserLayout from '@/components/layout/UserLayout.vue'
import { ArrowLeft } from '@element-plus/icons-vue'

const router = useRouter()
const dialogVisible = ref(false)
const selectedApplication = ref(null)

// 返回房东中心
const goBack = () => {
  router.push('/rental/landlord')
}

// 维修申请列表
const maintenanceApplications = ref([
  {
    id: 1,
    houseTitle: '精致一居室公寓',
    tenantName: '张三',
    faultType: 'water_electricity',
    urgency: 'high',
    faultDetails: '厨房水龙头漏水严重，已经影响到正常使用',
    contactPhone: '13800138000',
    expectedTime: '2024-01-15 14:00',
    remarks: '希望尽快处理，影响做饭',
    status: 'pending'
  },
  {
    id: 2,
    houseTitle: '豪华两居室',
    tenantName: '李四',
    faultType: 'air_conditioning',
    urgency: 'medium',
    faultDetails: '客厅空调制冷效果不好，需要检修',
    contactPhone: '13700137000',
    expectedTime: '2024-01-16 10:00',
    remarks: '',
    status: 'approved',
    estimatedTime: '2024-01-18 完成'
  },
  {
    id: 3,
    houseTitle: '温馨三居室',
    tenantName: '王五',
    faultType: 'internet',
    urgency: 'low',
    faultDetails: '网络信号不稳定，偶尔断网',
    contactPhone: '13600136000',
    expectedTime: '2024-01-17 16:00',
    remarks: '影响工作，希望尽快解决',
    status: 'rejected',
    rejectReason: '网络问题属于运营商责任，请联系网络服务商'
  }
])

// 查看详情
const viewDetails = (application) => {
  selectedApplication.value = application
  dialogVisible.value = true
}

// 通过申请
const approveApplication = (application) => {
  ElMessageBox.prompt('请输入预估处理时间', '通过申请', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputValidator: (value) => {
      if (!value || value.trim().length < 3) {
        return '预估处理时间至少3个字符'
      }
      return true
    },
    inputErrorMessage: '预估处理时间不能为空且至少3个字符'
  }).then(({ value }) => {
    if (value) {
      application.status = 'approved'
      application.estimatedTime = value
      ElMessage.success('已通过维修申请，已通知租客')
    }
  }).catch(() => {
    ElMessage.info('已取消操作')
  })
}

// 拒绝申请
const rejectApplication = (application) => {
  ElMessageBox.prompt('请输入拒绝理由', '拒绝申请', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputValidator: (value) => {
      if (!value || value.trim().length < 5) {
        return '拒绝理由至少5个字符'
      }
      return true
    },
    inputErrorMessage: '拒绝理由不能为空且至少5个字符'
  }).then(({ value }) => {
    if (value) {
      application.status = 'rejected'
      application.rejectReason = value
      ElMessage.success('已拒绝维修申请')
    }
  }).catch(() => {
    ElMessage.info('已取消操作')
  })
}

// 获取故障类型颜色
const getFaultTypeColor = (type) => {
  switch (type) {
    case 'water_electricity': return 'danger'
    case 'door_window': return 'warning'
    case 'furniture': return 'info'
    case 'air_conditioning': return 'primary'
    case 'internet': return 'success'
    default: return 'info'
  }
}

// 获取故障类型文本
const getFaultTypeText = (type) => {
  switch (type) {
    case 'water_electricity': return '水电故障'
    case 'door_window': return '门窗故障'
    case 'furniture': return '家具损坏'
    case 'air_conditioning': return '空调故障'
    case 'internet': return '网络故障'
    default: return '其他'
  }
}

// 获取紧急程度类型
const getUrgencyType = (urgency) => {
  switch (urgency) {
    case 'low': return 'info'
    case 'medium': return 'warning'
    case 'high': return 'danger'
    default: return 'info'
  }
}

// 获取紧急程度文本
const getUrgencyText = (urgency) => {
  switch (urgency) {
    case 'low': return '一般'
    case 'medium': return '紧急'
    case 'high': return '非常紧急'
    default: return '一般'
  }
}

// 获取状态类型
const getStatusType = (status) => {
  switch (status) {
    case 'pending': return 'warning'
    case 'approved': return 'success'
    case 'rejected': return 'danger'
    default: return 'info'
  }
}

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 'pending': return '待处理'
    case 'approved': return '已通过'
    case 'rejected': return '已拒绝'
    default: return '未知'
  }
}
</script>

<style scoped>
.maintenance-container {
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
}

.maintenance-wrapper {
  width: 100%;
  height: 100vh;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.content-area {
  flex: 1;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  overflow-y: auto;
  padding: 20px;
  margin: 20px;
  border-radius: 15px;
}

.maintenance-header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.maintenance-header h2 {
  color: #2c3e50;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.maintenance-header p {
  color: #7f8c8d;
  font-size: 16px;
  margin: 0;
}

.back-btn {
  position: absolute;
  top: 0;
  left: 0;
}

.maintenance-content {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.maintenance-header h3 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 18px;
}

.maintenance-header p {
  margin: 0 0 20px 0;
  color: #666;
}

.maintenance-table {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .maintenance-table {
    overflow-x: auto;
  }
}
</style> 